<template>
    <div class="left-nav" @mouseleave="hideMenu">
        <div class="left-nav-first">
            <div
                v-for="(firstNav, index) in navList"
                :key="index"
                @click="showNavSec?selectFirstNav(firstNav.key):''"
                @mouseenter="showNavSec?'':moveSelectFirstNav(firstNav.key)"
                class="left-nav-first-item"
                :class="{ active: firstNavIndex == firstNav.key }"
            >
                <svg class="icon left-nav-first-item-icon" aria-hidden="true">
                    <use :xlink:href="firstNav.icon" />
                </svg>
                <div class="left-nav-first-item-text">{{ firstNav.name }}</div>
            </div>
        </div>
        <!-- <transition name="navSec"> -->
        <div
            v-show="showNavSec"
            :class="['left-nav-second',menuShow?'menuShow':'']"
            :showNavSec="showNavSec"
        >
            <!-- <el-menu @select="selectMenuItem" :default-active="currentPath" :router="true" ref="elMenu"> -->
            <!-- :default-active="$route.matched[1].path" -->
            <!-- <el-menu @select="selectMenuItem" :unique-opened="true" :router="false" ref="elMenu"> -->
            <el-menu :unique-opened="true" :router="false" ref="elMenu" :default-active="defaultActive">
                <template>
                    <div v-for="(secondNav, index) in elMenuList" :key="index">
                        <el-submenu
                            v-if="secondNav.children"
                            :index="secondNav.name"
                            :style="widthDealSubmenu"
                            popper-class="abc"
                        >
                            <template slot="title" >
                                <span>{{ secondNav.name }}</span>
                            </template>
                            <el-menu-item
                                v-for="(thirdNav,
								thirdIndex) in secondNav.children"
                                :index="desPath(thirdNav)"
                                :key="thirdIndex"
                                :style="widthDeal2"
                                @click="selectMenuItem(thirdNav.description,thirdNav.path,thirdNav.threeMap)"
                            >
                                <span slot="title">{{ thirdNav.name }}</span>
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item
                            v-else
                            :index="desPath(secondNav)"
                            :style="widthDeal"
                            @click="selectMenuItem(secondNav.description,secondNav.path,secondNav.threeMap)">
                            <span slot="title">{{ secondNav.name }}</span>
                        </el-menu-item>
                    </div>
                </template>
            </el-menu>
        </div>
        <!-- </transition> -->
    </div>
</template>

<script>
import routerJson, { queryMenuInfo } from "@/router/router-json.js"
import bus from "@/common/js/bus.js"
export default {
    data() {
        return {
            widthDeal: {
                "min-width": "80px",
                "padding-right": "5px",
                "padding-left": "10px",
            },
            widthDeal2: {
                "min-width": "80px",
                "padding-right": "5px",
                "padding-left": "15px",
            },
            widthDealSubmenu: {
                "min-width": "80px",
                "padding-right": "0px",
                "padding-left": "0px",
            },
            firstNavIndex: 'control-panel',
            navList: [],
            menuShow: false,
            currentPath: "",
            defaultActive: '',
            threeMenusMap: {}
        };
    },
  directives: {
        trigger: {
        inserted(el, binging, index) {
            el.id == el.title ? el.click() : null; // 只点击第一个，id是在循环中手动添加的
        },
        },
        collease: {
        inserted(el, binging, index) {
            let idflag=el.id;
            if(idflag.indexOf(el.title)>-1){
                el.click()
            }
        },
        },
    },
    computed: {
        showNavSec() {
            return this.$store.state.showNavSec
        },
        elMenuList() {
            var menu = this.navList.find(item => item.key === this.firstNavIndex);
            if(!menu){
                return;
            }
            return menu ? menu.children : this.navList[0].children
        },
        desPath() {
            return (menu) => {
                return menu.description || menu.path;
            }
        },
        menuCurrent() {
            return this.$store.state.menuCurrent;
        }
    },
    methods: {
        toLine(name) {
            return name.replace(/([A-Z])/g,"-$1").toLowerCase();
        },
        selectMenuItem(description, path, children) {
            bus.$emit('inPageMenus', children)
            sessionStorage.setItem("reloadName",description)
            if (children && children.length > 0) {
                this.$router.push({ name: children[0].name });
            } else if (description) {
               this.$router.push({ name: description });
            } else if (path) {
                this.$router.push(path);
            }else{
                 this.$router.push({path:'/404'});
            }
            // this.currentPath = description;
        },
        selectFirstNav(index) {
            sessionStorage.setItem('pageIndex', index);
            this.firstNavIndex = index;
        },
        moveSelectFirstNav(index) {
            this.menuShow = true;
            this.selectFirstNav(index)
        },
        hideMenu() {
            this.menuShow = false;
        },
        madeMenu() {
     
              let madeMenusArr = [];
            	return this.$http
                 .post("/admin/login/index.php?act=login&op=getAuth").then((res) => {
                     if(res.code==1){
                     let menus = res.data;
               let navArr = [];
            //菜单递归函数
            let checkMenuChildren = (menusChild) => {
                let menuArr = [];
                menusChild.forEach(item => {
                    //注意只能是三级
                        if (item.child && item.child[0].in_page === '0') {
                            //菜单中   二级收纳菜单  如设置-》数据服务
                            menuArr.push(
                                {
                                    name: item.menu_name,
                                     description: item.description,
                                    children: checkMenuChildren(item.child)
                                })
                        } else {
                            var obj = {
                                name: item.menu_name,
                                description: item.description,
                                //path: (routerJson[item.description] && (routerJson[item.description].path)),//这个属性已经没用了基本  只有二级菜单有用 马上消灭二级菜单
                                threeMap: [],
                            }
                            //如果仅仅二级菜单无三级菜单 如设置-》sass   条件①item  无child  ②item.in_page='0'  ③ routerJson[item.description]存在
                            /* if (item.child && item.child[0].in_page === '0' && routerJson[item.description]) {
                                obj = {
                                    name: item.menu_name,
                                    path: (routerJson[item.description] && (routerJson[item.description].path))
                                }
                            } */
                            //如果有三级菜单   条件① item 有child ②item.child[0].in_page='1' 

                            if (item.child && item.child[0].in_page === '1') {
                                // obj.inPageMenus = [];
                                item.child.forEach(inPage => {
                                    let tabItem = { label: inPage.menu_name, name: inPage.description };
                                    //每个二级菜单自带threeMap 三级菜单     三级菜单activename与路由名称$route.name相同   点击问题已解决
                                    obj.threeMap.push(tabItem)
                                    //刷新页面问题  需找到三级菜单
                                    if (!this.threeMenusMap[obj.description]) {
                                        this.threeMenusMap[obj.description] = {
											is_show_tab:item.is_show_tab,
											tabs:[]
										};
                                    }
                                    this.threeMenusMap[obj.description].tabs.push(tabItem)
                                    this.threeMenusMap[inPage.description] = { parent: obj.description };

                                })
                            }
                            menuArr.push(obj)
                        }
                   
                })
                return menuArr;
            }
            menus.forEach(ele => {
                var menuItem = {};
                menuItem.name = ele.menu_name;
				if(!queryMenuInfo(ele.description)){
					return
				}
                menuItem.icon = queryMenuInfo(ele.description).icon;
                menuItem.key = queryMenuInfo(ele.description).key;
                if(ele.child){
                  menuItem.children = checkMenuChildren(ele.child);
                }else{
                     menuItem.children = [];
                }
               
                madeMenusArr.push(menuItem);
            });
            this.$store.commit('SET_THREEMENUSMAP', this.threeMenusMap)
                }
                 return madeMenusArr;
                })
           
        },
        sessionCheck(session) {
            if (session == 1) {
   /* this.navList = [
                    // 控制台
                    {
                         name: "设置",
                         icon: "#icon-settings-1",
                         key: "control-panel",
                         children: [
                             {
                                 name: "主页",
                                 path: "/home/control-panel/welcome"
                             },
                             {
                                 name: "SASS架构",
                                 path: "/home/control-panel/sass"
                             },
                             {
                                 name: "平台管理员管理",
                                 path: "/home/control-panel/admin-control"
                             },
                             {
                                 name: "集团管理员管理",
                                 path: "/home/control-panel/group-control"
                             },
                             {
                                 name: "数据服务",
                                 children: [
                                     {
                                         name: "商家申请列表",
                                         path: "/home/control-panel/data-service/merchant-application-list"
                                     },
                                     {
                                         name: "供应商服务配置",
                                         path: "/home/control-panel/data-service/supplier-config"
                                     },
                                     {
                                         name: "商家合同管理",
                                         path: "/home/control-panel/data-service/business-contract"
                                     },
                                     {
                                         name: "商家话术服务配置",
                                         path: "/home/control-panel/data-service/business-talk"
                                     },
                                     {
                                         name: "批处理程序配置",
                                         path: "/home/control-panel/data-service/program-config"
                                     },
                                     {
                                         name: "DMP投放管理",
                                         path: "/home/control-panel/data-service/dmp"
                                     }
                                 ]
                             },
                             {
                                 name: "产品库",
                                 path: ""
                             },
                         ]
                     }, 
                    // 运营
                    {
                        name: "运营",
                        icon: "#icon-vector",
                        key: "operate-panel",
                        children: [
                            {
                                name: "活动管理",
                                children: [
                                    {
                                        name: "新车团购",
                                        path: "/home/operate-panel/newCar-group/group-management"
                                    },
                                    {
                                        name: "售后团购",
                                        path: "/home/operate-panel/afterSell-group"
                                    },
                                    {
                                        name: "特惠好车",
                                        path: "/home/operate-panel/goods-management/on-sale-good-car"
                                    },
                                    {
                                        name: "抽奖活动",
                                        path: "/home/operate-panel/lottery-activity/lottery-activity"

                                    },
                                    {
                                        name: "融资租赁",
                                        path: "/home/operate-panel/financing/activity-list"
                                    },
                                ]
                            },
                            {
                                name: "店铺管理",
                                children: [
                                    {
                                        name: "店铺列表",
                                        path: "/home/operate-panel/permission/store-permission"
                                    },
                                    {
                                        name: "短信充值",
                                        path: "/home/operate-panel/sms-recharge/first"
                                    },
                                    {
                                        name: "商家积分配置",
                                        path: "/home/operate-panel/integral-allocation"
                                    },
                                    {
                                        name: "商家短信",
                                        path: "/home/operate-panel/sms-store/integral-list"
                                    }
                                ]
                            },
                            {
                                name: "会员管理",
                                path: "/home/operate-panel/member-management"
                            },
                            {
                                name: "积分商城",
                                children: [
                                    {
                                        name: "品牌列表",
                                        path: "/home/operate-panel/points-mall/brand-list"
                                    },
                                    {
                                        name: "类目维护",
                                        path: "/home/operate-panel/points-mall/category"
                                    },
                                    {
                                        name: "积分商品",
                                        path: "/home/operate-panel/points-mall/commodity"
                                    },
                                    {
                                        name: "积分订单",
                                        path: "/home/operate-panel/points-mall/points-order"
                                    },
                                     {
                                        name: "订单统计",
                                        path: "/home/operate-panel/order-statistics/order-statistics-index"
                                     },
                                ]
                            },
                           
							{
                                name: "广告管理",
                                path: "/home/operate-panel/advertisement-management"
                            },
                            {
                                name: "在线支付",
                                path: "/home/operate-panel/online-pay"
                            },
                            {
                                name: "预约管理",
                                path: "/home/operate-panel/booking-management"
                            },
                            {
                                name: "营销工具",
                                children: [
                                    {
                                        name: "项目券管理",
                                        path: "/home/operate-panel/project-voucher/group-management"

                                    },
                                    {
                                        name: "商家卡券",
                                        path: "/home/operate-panel/coupon-management/coupon-list"

                                    }
                                ]
                            },
                            {
                                name: "消息推送",
                                path: "/home/operate-panel/message-push"
                            },
                            {
                                name: "二手车评估",
                                path: "/home/operate-panel/car-test/integral-list"
                            },
                            {
                                name: "短连接生成",
                                path: "/home/operate-panel/short-connection"
                            }
                        ]
                    },
                    // 财务
                    {
                        name: "财务",
                        icon: "#icon-money-1",
                        key: "money-panel",
                        children: [
                            {
                                name: "支付分账",
                                children: [
                                    {
                                        name: "商家开户",
                                        path: "/home/money-panel/finace-open/finace-list"
                                    },
                                    {
                                        name: "手动分账",
                                        path: "/home/operate-panel/pay-check/sign-up-info"
                                    },
                                    {
                                        name: "自动分帐",
                                        path: "/home/operate-panel/wpay-check/sign-up-info"
                                    }
                                ]
                            },
                            {
                                name: "对账复核",
                                children: [
                                    {
                                        name: "积分订单",
                                        path: "/home/money-panel/reconciliation-order-list"
                                    },
                                    {
                                        name: "在线支付订单",
                                        path: "/home/money-panel/reconciliation-online-list"
                                    }
                                ]
                            }
                        ]
                    },
                    // 统计
                    {
                        name: "统计",
                        icon: "#icon-graph-2",
                        key: "statistics-panel",
                        children: [
                            {
                                name: "业务报表",
                                path: "/home/statistics-panel/business-report/tab-control"
                            }
                        ]
                    }
                ];*/



                this.madeMenu().then((value)=>{
                this.navList = value.concat(this.navList);
                })
               } else {
                this.navList = [
                    // 集团数据
                    {
                        name: "集团数据",
                        icon: "#icon-bullet-list",
                        key: "group-panel",
                        children: [
                            {
                                name: "潜客数据",
                                // path: "/home/operate-panel/sms-recharge/first",
                                children: [
                                    {
                                        name: "综合查询",
                                        path: "/home/group-panel/group-data/customers-list"
                                    },
                                    {
                                        name: "数据统计",
                                        path: "/home/group-panel/group-data/customers-comprehen-list"
                                    }
                                ]
                            },
                            {
                                name: "售后数据",
                                children: [
                                    {
                                        name: "综合查询",
                                        path: "/home/group-panel/group-data/service-list"
                                    },
                                    {
                                        name: "数据统计",
                                        path: "/home/group-panel/group-data/service-comprehen-list"
                                    }
                                ]
                            },
                            {
                                name: "保险数据",
                                children: [
                                    {
                                        name: "综合查询",
                                        path: "/home/group-panel/group-data/insurance-list"
                                    },
                                    {
                                        name: "数据统计",
                                        path: "/home/group-panel/group-data/insurance-comprehen-list"
                                    }
                                ]
                            },
                            {
                                name: "卡券数据",
                                // path: "/home/operate-panel/permission/store-permission",
                                children: [
                                    {
                                        name: "综合查询",
                                        path: "/home/group-panel/group-data/coupon-list"
                                    },
                                    {
                                        name: "数据统计",
                                        path: "/home/group-panel/group-data/coupon-comprehen-list"
                                    }
                                ]
                            }
                        ]
                    },
                    // 集团管理
                    {
                        name: "集团管理",
                        icon: "#icon-controller-",
                        key: "manage-panel",
                        children: [
                            {
                                name: "经销商管理",
                                path: "/home/manage-panel/company-manage/company"
                            },
                            {
                                name: "组合管理",
                                path: "/home/manage-panel/commu-manage/commu"
                            }
                        ]
                    }
                ];
            }
        },
        menusMap(menus, key, name, parent = null) {
            let _menu = null
            for (let menu of menus) {
                if (menu[key] === name) {
                    _menu = menu
                    if (key === 'name') _menu = parent
                } else if (menu.children && menu.children.length > 0) {
                    _menu = this.menusMap(menu.children, key, name, menu)
                } else if (menu.threeMap && menu.threeMap.length > 0) {
                    _menu = this.menusMap(menu.threeMap, "name", name, menu)
                }
                if (_menu) break
            }
            return _menu
        }
    },
    watch: {
        menuCurrent: {
            handler(val, oldval) {
                if(val) {
                    this.$refs.elMenu.activeIndex = val
                }
            }
        },
        $route: {
            handler(to, from) {
                // 实现路由切换自动选中菜单，主要针对组件页面中进行的路由链接跳转
                // const menu = this.menusMap(this.elMenuList || [], 'description', to.name)
                // this.$refs.elMenu.activeIndex = menu && menu.description || null
                // this.defaultActive = menu && menu.description || null
            },
            // immediate: true
        },
        elMenuList: {
            handler(val, oldval) {
                // 实现刷新 自动选中菜单
                const menu = this.menusMap(val || [], 'description', this.$route.name)
                this.defaultActive = menu && menu.description || null
            }
        }
    },
    created() {
        if (window.performance.navigation.type == 1) {
            this.descriptionName=sessionStorage.getItem("reloadName")
        }
        let user_info = this.$store.state.user_info;
        this.sessionCheck(user_info.admin_type);
        if (user_info.admin_is_super === '1') {
            this.navList.push({
                name: "权限",
                // icon: "#icon-graph-2",
                icon: "#icon-xitongquanxian",
                key: "power-panel",
                children: [
                    {
                        name: "权限编辑",
                        description: 'user-power',
                        path: "/power-panel/user-power"
                    },
                     {
                        name: "日志操作",
                        description: 'operation-log',
                        path: "/power-panel/operation-log"
                    }
                ]
            })
        }
        //菜单active处理
        let routeInfo = this.$route.fullPath.split('/');
        if (user_info.admin_type == 1) {
            if (routeInfo[1] === 'home') {
                this.firstNavIndex = routeInfo[2];
            } else {
                this.firstNavIndex = routeInfo[1];
            }
        }
    },
    mounted() {
        window.addEventListener("load", function () {
            // 在页面刷新后执行
            // if (vm.$route.path != "/home/control-panel/welcome") {
            //     vm.$router.replace("/home/control-panel/welcome"); // 列表页面的路由
            // }
        });

        /* window.onbeforeunload = function () {
            sessionStorage.setItem("pageIndex","control-panel"); //控制侧边导航栏
            sessionStorage.setItem("menuItem","/home/control-panel/welcome");
        };

        if (sessionStorage.getItem("pageIndex")) {
            this.firstNavIndex = sessionStorage.getItem("pageIndex");
        }
        if (sessionStorage.getItem("menuItem")) {
            this.currentPath = sessionStorage.getItem("menuItem");
        } */
    },
    name: "left-nav"
};
</script>

<style lang="scss" scoped>
@import "@/common/scss/variable.scss";

.left-nav {
    height: 100%;
    display: flex;
    align-items: stretch;
    &-first {
        width: 60px;
        background-color: #182b5c;
        padding: 20px 0px;
        box-shadow: inset -3px 0 10px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 1;
        overflow-y: auto;
        &-item {
            text-align: center;
            /deep/.icon {
                width: 26px;
                height: 26px;
                fill: #8191ad;
            }
            &-text {
                margin-top: 5px;
                color: #8191ad;
                font-size: $font-size-medium-m;
            }
        }
        &-item:hover {
            cursor: pointer;
            /deep/.icon {
                fill: #fff;
            }
            .left-nav-first-item-text {
                color: #fff;
            }
        }
        &-item + &-item {
            margin-top: 20px;
        }
        &-item.active {
            /deep/.icon {
                fill: #fff;
            }
            .left-nav-first-item-text {
                color: #fff;
            }
        }
    }
    &-second {
        flex: auto;
        background-color: #253f75;
        // transform:translateX(-101%);
        overflow-y: auto;
        min-width: 100px;
        /deep/.el-menu {
            background-color: transparent;
            border-right: none;
            .el-submenu {
                .el-submenu__title {
                    padding: 0 10px 0 10px !important;
                    color: #fff;
                    height: 40px;
                    line-height: 40px;
                    i {
                        color: #fff;
                    }
                }
                .el-submenu__title:hover {
                    // background-color: $color-background-dark-dd;
                    background-color: transparent;
                }
            }
            .el-menu-item {
                height: 40px;
                line-height: 40px;
                color: #fff;
                background-color: #253f75;
            }
            .el-menu-item.is-active {
                // background-color: $color-background-dark-dd;
                color: #fe7176;
            }
            .el-menu-item:hover {
                // background-color: $color-background-dark-dd;
                background-color: transparent;
            }
        }
        /deep/ .el-submenu__icon-arrow {
            right: 14px;
        }
    }
}
.menuShow {
    display: block !important;
    position: absolute;
    left: 60px;
    top: 0;
    height: 100%;
    z-index: 10000;
}
/* .navSec-enter,.navSec-leave-to {
	transform:translateX(-101%);
}
.navSec-enter-active,.navSec-leave-active{
	transition: all .2s ease-in-out;
}
.navSec-enter-to{
	transform:translateX(0%);
} */
</style>
